<style>
    .nav li, .commodity-bar {
        cursor: pointer;
    }

    .commodity-tbody td, .commodity-thead th {
        vertical-align: middle !important;
        text-align: center;
    }

    .info-tbody td, .info-thead th {
        vertical-align: middle !important;
        text-align: center;
    }

    .info_list_div td {
        vertical-align: middle !important;
        text-align: center;
    }

    img.index_img_url {
        width: 50px;
    }

    .cb-acive {
        background: #666666 !important;
        color: #ffffff;
    }
</style>
@include('base.loading_admin')
<main id="commodity" class="commodity">
    <nav id="commodity_nav" class="commodity_nav">
        <ul class="nav nav-pills ">
            <li role="presentation" class="active"><a href="{{asset($nav['one']['url'])}}">{{$nav['one']['name']}}</a>
            </li>
            <li role="presentation"><a href="{{asset($nav['two']['url'])}}">{{$nav['two']['name']}}</a></li>
            <li role="presentation"><a href="{{asset($nav['three']['url'])}}">{{$nav['three']['name']}}</a></li>
        </ul>
    </nav>
    <ul class="nav nav-pills" id="parent_nav">
        @foreach($classify as $key => $val)
            <li role="presentation" data-parent-id="{{$val['commodity_classify_id']}}"><a>{{$val['classify_name']}}</a>
            </li>
        @endforeach
    </ul>
    <ul class="nav nav-pills" id="children_nav">
        @foreach(reset($classify)['data'] as $key => $val)
            <li role="presentation" data-parent-id="{{$val['commodity_classify_id']}}"><a>{{$val['classify_name']}}</a>
            </li>
        @endforeach
    </ul>
    <div class="row">
        <div class="col-md-3">
            <table class="table table-striped commodity-table" id="commodity_list">
                <thead class="commodity-thead">
                <th>品名</th>
                </thead>
                <tbody class="commodity-tbody">
                </tbody>
            </table>
        </div>
        <div class="col-md-9" id="commodity-info" data-commodity-id="">
            <table class="table table-striped info-table form-inline" id="info_list">
                <thead class="info-thead">
                <th>颜色</th>
                <th>尺码</th>
                <th>库存</th>
                <th>价格</th>
                <th>图片</th>
                </thead>
                <tbody class="info-tbody">
                <tr>
                    <td>
                        <select class="form-control commodity-color-list" id="color_list">
                        </select>
                    </td>
                    <td>
                        <select class="form-control commodity-size-list" id="size_list">
                        </select>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="commodityNumber">
                    </td>
                    <td>
                        <input type="text" class="form-control" id="commodityPrice">
                    </td>
                    <td>
                        @include('Upload.asset')
                    </td>
                    <td>
                        <button class="btn btn-primary c-info-add">添加</button>
                    </td>
                </tr>
                </tbody>
                <tbody class="info_list_div">
                </tbody>
            </table>
            <div class="commodity-info-list">
            </div>
        </div>
    </div>
</main>
<script>
    var classify = {}
    var commodity = {}
    var size = {};
    var color = {};
    var token = $('meta[name="csrf-token"]').attr('content')
    var url = "http://shop-1253123347.file.myqcloud.com/uploads/2018-03-24/img/2018-03-24-19-39-00-5ab638d4ec907.jpg"
    uploader.up_img_url = url

    //添加商品信息
    $("#commodity-info").on('click', '.c-info-add', function () {
        var th = $(this)
        if ($("#commodity-info").attr('data-commodity-id') == '')
            return false
        if ($("#color_list option:selected").val() == '')
            return false
        if ($("#size_list option:selected").val() == '')
            return false
        if ($("#commodityNumber").val() == '')
            return false
        if ($("#commodityPrice").val() == '')
            return false
        let data = {
            _token: token,
            up_img_url: uploader.up_img_url,
            commodity_info: $("#commodity-info").attr('data-commodity-id'),
            color_list: $("#color_list option:selected").val(),
            size_list: $("#size_list option:selected").val(),
            commodityNumber: $("#commodityNumber").val(),
            commodityPrice: $("#commodityPrice").val(),
        }
        if ($('#inputInfo').val() != '') {
            $.post('/admin/commodity/api_info/add_info', data, function (data) {
                if (data.errorCode == 0) {
                    info_load(data.data)
                } else {
                    $('.commodity-info-list').html('');
                }
                loading.hide()
            }, 'json')
        }
    })

    //商品信息加载
    function info_load(data) {
        let html = ''
        for (var k in data) {
            html += '<tr><td>' + color[data[k].commodity_color_id].commodity_color_name + '</td>\n' +
                '<td>' + size[data[k].commodity_size_id].commodity_size_name + '</td>\n' +
                '<td>' + data[k].commodity_info_number + '</td>\n' +
                '<td>' + data[k].commodity_info_price + '</td>\n' +
                '<td><button class="btn btn-primary c-info-del">删除</button></td></tr>'
        }
        $('.info_list_div').html(html)
    }

    //商品点击事件
    $('#commodity_list').on('click', '.commodity-bar', function () {
        if ($(this).attr('data-commodity-id') == ('' || undefined || 0)) {
            loading.hide()
            return false
        }
        loading.show()
        $('.commodity-bar').attr('class', 'commodity-bar')
        $(this).attr('class', 'commodity-bar cb-acive')
        $('#commodity-info').attr('data-commodity-id', $(this).attr('data-commodity-id'))

        $.post('/admin/commodity/api_color/get_color', {
            _token: token,
            commodity_id: $('#commodity-info').attr('data-commodity-id')
        }, function (data) {
            if (data.errorCode == 0) {
                color = data.data
                //获取尺码
                $.post('/admin/commodity/api_size/get_size', {
                    _token: token,
                    commodity_id: $('#commodity-info').attr('data-commodity-id')
                }, function (data) {
                    if (data.errorCode == 0) {
                        size = data.data

                        $.post('/admin/commodity/api_info/get_info', {
                            _token: token,
                            commodity_id: $('#commodity-info').attr('data-commodity-id')
                        }, function (data) {
                            if (data.errorCode == 0) {
                                info_load(data.data)
                            } else {
                                $('.info_list_div').html('');
                            }
                            loading.hide()
                        }, 'json')

                        size_load(size)
                    } else {
                        loading.hide()
                        $('.commodity-color-list').html('');
                        $('.commodity-size-list').html('');
                        $('.info_list_div').html('');
                    }
                }, 'json')

                color_load(color)
            } else {
                loading.hide()
                $('.commodity-color-list').html('');
                $('.commodity-size-list').html('');
                $('.info_list_div').html('');
            }
        }, 'json')
    })

    function size_load(data) {
        let html = ''
        for (k in data) {
            html += '<option data-size-id="' + data[k].commodity_size_id + '" value="' + data[k].commodity_size_id + '">' + data[k].commodity_size_name + '</option>'
        }
        $('.commodity-size-list').html(html)
    }

    function color_load(data) {
        let html = ''
        for (k in data) {
            html += '<option data-color-id="' + data[k].commodity_color_id + '" value="' + data[k].commodity_color_id + '">' + data[k].commodity_color_name + '</option>'
        }
        $('.commodity-color-list').html(html)
    }

    //获取分类
    $.post('/admin/commodity/api_classify/get_all_classify', {
        _token: token,
    }, function (data) {
        if (data.errorCode == 0) {
            classify = data.data
            $('#parent_nav li').eq(0).click()
        }
    })
    //父类点击事件
    $('#parent_nav').on('click', 'li', function () {
        var th = $(this)
        $('#parent_nav li').attr('class', '')
        th.attr('class', 'active')
        children_nav_load(classify[th.attr('data-parent-id')].data)
    })

    //子分类加载
    function children_nav_load(data) {
        let html = ''
        for (k in data) {
            html += '<li role="presentation" data-parent-id="' + data[k].commodity_classify_id + '"><a>' + data[k].classify_name + '</a></li>'
        }
        $('#children_nav').html(html)
        $('#children_nav li').eq(0).click()
    }

    //获取子商品
    $('#children_nav').on('click', 'li', function () {
        loading.show()
        var th = $(this)
        $('#children_nav li').attr('class', '')
        th.attr('class', 'active')
        $.post('/admin/commodity/api_commodity/get_children_commodity', {
            _token: token,
            classify: th.attr('data-parent-id')
        }, function (data) {
            if (data.errorCode == 0) {
                commodity = data.data
                commodity_load(commodity)
            } else {
                $('.commodity-tbody').html('')
            }
            loading.hide()
        })
    })

    //商品加载
    function commodity_load(data) {
        let html = ''
        for (k in data) {
            html += '<tr class="commodity-bar" data-commodity-id="' + data[k].commodity_id + '">\n' +
                '            <td>' + data[k].commodity_name + '</td>\n' +
                '        </tr>'
        }
        $('.commodity-tbody').html(html)
        $('.commodity-bar').eq(0).click()
    }
</script>